<template>
  <div class="layer gap-3 bg-white">

    <div class="center flex-col w-[45%]">

      <div class="section px-14 pt-34 gap-1 text-center">
        <div class="title-lg">欢迎使用</div>
        <div class="title-4xl text-emerald-500 drop-shadow">鑫毅会员系统</div>
        <div class="">精准管理 高效营销 提升忠诚 助力增长</div>
      </div>

      <div class="section px-14 pt-2 gap-3">

        <div class="form-item">
          <div class="input-box">
            <input type="text" id="username" placeholder="账号" v-model="loginModel.username" @blur="hanldeInputBlur">
          </div>
          <div class="text-red-500 text-xs">{{ loginRuleModel.username.ruleMessage }} </div>
        </div>

        <div class="form-item">
          <div class="input-box">
            <input type="password" id="password" placeholder="密码" v-model="loginModel.password" @blur="hanldeInputBlur">
          </div>
          <div class="text-red-500 text-xs">{{ loginRuleModel.password.ruleMessage }} </div>
        </div>

        <div class="mt-6 btn-primary" @click="hanldeClickLogin">
          <div class="icon-xl i-mdi-arrow-right-thin-circle-outline animate-pulse"></div>
          <div class="text-white">立即登陆</div>
        </div>

        <div class="text-center text-emerald-500 underline" @click="">游客试用</div>

      </div>

      <div class="mt-10 section center">
        <div class="desc">--- 鑫毅智慧 卓越赋能 ---</div>
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">

import useLogin from '@monorepo/hooks/useLogin'
import { fetchPrivoder } from './utils/http';

const { loginModel, loginRuleModel, hanldeInputBlur, login } = useLogin(fetchPrivoder)

const hanldeClickLogin = () => {
  login(
    (data) => {
      console.log('data=>', data);
    },
    (error: string) => {
      console.log('busError=>', error);
    },
    (error: string) => {
      console.log('svcError=>', error);
    }
  )
}


</script>

<style></style>
